<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>myFirstReactDemo</title>
    <!-- react核心js文件 -->
    <script src="./build/react.js" charset="utf-8"></script>
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js" charset="utf-8"></script> -->
    <!-- 提供与dom相关功能 -->
    <script src="./build/react-dom.js" charset="utf-8"></script>
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js" charset="utf-8"></script> -->
    <!-- 将jsx转换成js语法 -->
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js" charset="utf-8"></script> -->
    <script src="./build/browser.min.js" charset="utf-8"></script>
</head>

<body>
    <div id="container">

    </div>
</body>
<!-- 在react使用jsx，跟js不兼容，在使用jsx地方设置type：text/babel -->
<!-- babel编码转换器，将es6转成浏览器能识别的js -->
<script type="text/babel">
//在此处编写react代码
// props是组件自身属性，一般用于嵌套在内外层组件中，负责传递信息（通常由父组件向子组件传递）
// 注意props对象中属性与组件的属性一一对应，不要直接修改props中属性值
var ShowHead = React.createClass({
    render:function (params) {
        return (
            <h1>{this.props.title}</h1>
        )
    }
});
var ShowFoot = React.createClass({
    render:function (params) {
        return (
            <h1>{this.props.foot}</h1>
        )
    }
});

var ShowContent = React.createClass({
    render:function (params) {
        return (
            <div>
                <ShowHead title={this.props.title}/>
                <ShowFoot foot={this.props.foot}/>
            </div>
            
        )
    }
});


    ReactDOM.render(
  <ShowContent title="阿甘" foot="学习react"/>,
  document.getElementById("container")
);


</script>

</html>